<template>
    <view>
        <!-- pages/wallet/index.wxml -->
        <view class="headtop" :style="'padding-bottom:' + statusHeight + 'px;'">
            <image src="/static/walletbg.png" mode="aspectFit" class="headtopbg"></image>
            <view class="header" :style="'padding-top:' + statusHeight + 'px;'">
                <navigator open-type="navigateBack" hover-class="none">
                    <image src="/static/back.png" mode="aspectFit" class="back"></image>
                </navigator>
                <text class="title">我的推广</text>
            </view>
            <view class="yue">
                <view class="money" @tap="gopage" data-url="/pages/center/setting/xieyi?id=3">
                    <text>推广总人数</text>
                    <text>{{ yue }}</text>
                </view>
                <!-- <view class="money" bindtap="gopage" data-url="/pages/center/setting/xieyi?id=4">
      <text>{{userinfo.user.okyue}}</text>
      <text>余额（元）</text>
    </view> -->
                <view class="btn">
                    <!-- <text class="tixian" bindtap="tixian">提现</text> -->
                    <text></text>
                    <text class="tixian" @tap="chongzhi">推广二维码</text>
                </view>
            </view>
        </view>
        <view class="tab">
            <text :class="type == '' ? 'active' : ''" @tap="changetab" data-type="">全部会员</text>
            <text :class="type == '1' ? 'active' : ''" @tap="changetab" data-type="1">VIP会员</text>
            <text :class="type == '2' ? 'active' : ''" @tap="changetab" data-type="2">普通会员</text>
        </view>
        <scroll-view style="height: 960rpx" scroll-y>
            <view class="ranking-bottom" v-for="(item,index) in list" :key="index" @click="gonext(item.uid)">
            	<view class="bottom-left">
            		<text>{{index+1}}</text>
            		
            	</view>
            	<view class="bottom-right">
            		<view class="br-left">
            				<view class="br-left1">
            						<image :src="item.headimgurl" mode=""></image>
            					</view>
            					<view class="br-left2">
            						<view style="display: flex; justify-content: space-between;">
            							<view>{{item.username}}</view>
            							<view style="color: gray;">{{item.reg_time}}</view>
            						</view>
            						<view style="display: flex;justify-content: space-between;">
            							<view>姓名:{{item.name}}</view>
            							<view @click="boda(item.phone)">电话:{{item.phone}}</view>
            						</view>
            				<!-- 	<text>
            						{{item.username}}    
            						加入时间:{{item.reg_time}}姓名:{{item.name}}
            						电话:{{item.phone}}</p></text> -->
            					</view>
            		</view>
            		
            	</view>
            </view>
            <van-empty description="暂无数据" v-if="!list || list.length < 1" />
        </scroll-view>

        <view v-if="show" class="popout">
					<view class="shadow">
						
					</view>
					<view class="pop-content">
						<view>
						    <canvas canvas-id="my-canvas" style="width: 324px; height: 425px"></canvas>
						</view>
						<view class="savebtn" @tap="saveImg">保存我的推广码</view>
					</view>


        </view>
		<uni-popup ref="popup">
			<view style="width: 220px;height: 220px;">
				<image :src="src.path" style="width: 100%;height: 100%;"></image>
			</view>
		</uni-popup>
    </view>
</template>

<script>
import vanEmpty from '../../components/empty/empty.vue';

// pages/wallet/index.js
const app = getApp();
export default {
    components: {
        vanEmpty
    },
    data() {
        return {
			src:'',
            nextp: 1,
            count: '',
            type: '',
            show: false,
            qrcode: '',
            statusHeight: '',
            content: '',
            yue: '',
            list: '',
            qrcodeW: '',
            qrcodeH: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var that = this;
        this.init();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.nextp) {
            this.init();
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
		boda(phone){
			uni.makePhoneCall({
				phoneNumber:phone
			})
		},
        init() {
            var _this = this;
			if(!_this.nextp) return false;

            uni.showLoading({
                title: '加载中...'
            });
            _this.$http(
                'center/gettuiguanglist',
                {
                    p: _this.nextp,
                    type: _this.type,
                    count: _this.count
                },
                function (res) {
					uni.hideLoading()
                    if (_this.nextp == 1) {
						_this.yue = res.data.yue;
                       _this.list = res.data.list;
					   _this.qrcode = res.data.path;
                    } else {
                        if (res.data.list) {
                            for (var i = 0; i < res.data.list.length; i++) {
                                _this.list.push(res.data.list[i]);
                            }

                        
                        }
                    }

                  _this.nextp = res.data.nextp;
                }
            );
        },

        changetab(e) {
            var type = e.currentTarget.dataset.type;
			this.type = type;
			this.nextp = 1;
			
            this.init();
        },

        gopage(e) {
            var url = e.currentTarget.dataset.url;
            uni.navigateTo({
                url: url
            });
        },
		gonext(uid){
			uni.navigateTo({
				url:'/pages/wallet/index2?puid='+uid
			})
		},

        chongzhi() {
            var that = this;
			this.$refs.popup.open('center')
            that.$http('center/getmyqrcode',{},function(res){
				console.log(res.data.path);//图片地址
				that.src = res.data
			})
			
        },

        onClose() {
            this.setData({
                show: 0
            });
        },

        gomsg(e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/wallet/mingximsg?id=' + id
            });
        },

        tixian() {
            uni.navigateTo({
                url: '/pages/wallet/tixian'
            });
        }
    }
};
</script>
<style lang="scss">
@import './index.scss';
</style>
